import React, { useState, useEffect } from 'react';
import "../../assets/sass/LoginTable.scss";
import
{
    Button, Input,
    Spin, Form, message
} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useHistory } from "react-router-dom";
import styled from "styled-components";
import
{
    Link
} from "react-router-dom";
import Upload from '../Extra/Upload';
const Wrapper = styled.div
    `
    background: #f8f9ff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: "FontAwesome";
    `;

export default function Login()
{
    const [spinning, setspinning] = useState(true);

    const [loading, setloading] = useState(false);

    let history = useHistory();

    useEffect(() =>
    {
        setTimeout(() =>
        {
            return setspinning(false);
        }, 500);
    }, [spinning]);


    const Verify = async () =>
    {
        let data = new FormData(document.getElementById("UserInfo") as HTMLFormElement);
        if (data.getAll('UserName')[0] === "" || data.getAll('PassWord')[0] === "") return;
        setloading(true);
        try
        {
            let response = await fetch("http://localhost:3065/login",
                {
                    method: "POST",
                    body: data
                });
            let result = await response.json();
            if (result === "User Not Excise") message.error("用户名不存在");
            if (result === "Error PassWord") message.error("密码错误");
            setloading(false);
            if (result === "PASS")
            {
                setloading(false);
                sessionStorage.setItem('admin', data.get("UserName") as string);
                message.success("欢迎您" + data.getAll('UserName')[0]);
                setTimeout(() =>
                {
                    history.push("/Home");
                }, 1000);
            }

        }
        catch (e)
        {
            console.error(e);
        }
    };


    return (
        <Wrapper>
            <Spin size="large" spinning={spinning} />
            {!spinning &&
                <main className="LoginForm">
                    <header>
                        <div className="LogoArea">
                            <i></i>
                            <span>LeomharT</span>
                        </div>
                    </header>
                    <div className="UserInfo">
                        <Form id="UserInfo">
                            <Form.Item
                                name="UserName"
                                rules={[{
                                    required: true,
                                    message: "请输入用户名"
                                }]}
                            >
                                <Input name="UserName" size="large" prefix={<UserOutlined />} placeholder="UserName" autoComplete="off" />
                            </Form.Item>
                            <Form.Item
                                name="PassWord"
                                rules={[{
                                    required: true,
                                    message: "请输入密码"
                                }]}
                            >
                                <Input.Password name="PassWord" size="large" prefix={<LockOutlined />} placeholder="PassWord" autoComplete={"off"} />
                            </Form.Item>
                            <Button size='large' type="primary" htmlType="submit" style={{ width: "100%" }} onClick={Verify} loading={loading}>Login</Button>
                        </Form>
                    </div>
                    <footer className="Footer">
                        <div >
                            <Button type="link">Forget Password</Button>
                        </div>
                        <div style={{ marginLeft: "150px" }}>
                            <Button type="link"><Link to="/Register">Register</Link></Button>
                        </div>
                    </footer>
                </main>
            }
        </Wrapper >
    );
}
